<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>隔壁租客竟敢吃我的猫咪？</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no" />
    <meta name="MobileOptimized" content="320" />
    <link rel="stylesheet" href="style/common.css" />
    <link rel="stylesheet" href="style/page.css" />
    <script type="text/javascript" src="js/main.js"></script>
    <script>
        function randomUuid() {
            return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
                const r = Math.random() * 16 | 0;
                const v = c === "x" ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }
    </script>
</head>

<body>
    <!-- 
        TODO list
        
        1. 我的奖品-文案提取出来
        2. 二维码-动态设置，文字对应
        5. 屏幕尺寸设置大小，并垂直居中， 宽度还得区分左、右手机，居左或者居右
        6. 开门文案右移
        7. 页面转场淡出动画
        9. 小鱼干动画2链接
        10. 去除4只猫，保留一只猫和表情
        11. 初始为：逗猫棒、鱼干攻击
        12. 添加猫咪声音（两边都有）
        13. 优惠券金额未确认
        14. 分享内容
        15. 整体背景音乐和pk背景音乐。
        17. 链接离线提示

        girl.html
        boy.html
     -->

    <div class="warp bg wrap_right">

        <!-- 加载中 start -->
        <div class="page bg none" id="loading">
            <div class="bg">
                <img src="images/loading/loading_bg.jpg">
            </div>
            <div class="loading auto-x" data-step="s1" data-top="360">
                <div class="loading__cat">
                    <img src="images/loading/loading_cat.png">
                </div>
                <div class="loading__bar">
                    <img src="images/loading/loading_bar.png">
                </div>
                <div class="loading__num" id="loading-percent">
                    0%
                </div>
            </div>
        </div>
        <!-- 加载中 end -->


        <!--音乐 start-->
        <div id="music">
            <div class="music play"></div>
        </div>
        <!--音乐 end-->

        <!-- socket链接失败 start -->
        <div class="page bg bg_black none" id="socket">
            <div class="socket__tips auto-x">
                <div class="socket__tips-text">
                    对方已离线
                    <br>请重新开始
                </div>
                <div class="socket__tips-bg">
                    <img src="images/cover/cover_prize-bg.png">
                </div>
                <div class="socket__tips-btn">
                    <img src="images/cover/cover_prize-btn.png">
                </div>
            </div>
        </div>
        <!-- socket链接失败 end -->
    </div>

    <!--下面是竖屏提示,性能原因丢最后-->
    <div id="orientLayer" class="mod-orient-layer">
        <div class="mod-orient-layer__content">
            <i class="icon mod-orient-layer__icon-orient"></i>
            <div class="mod-orient-layer__desc">为了更好的体验，请使用竖屏浏览</div>
        </div>
    </div>


    <link rel="stylesheet" type="text/css" href="style/print.css">

    <!-- 微信userinfo -start-  -->
    <script type="text/javascript" src="js/weixin.js"></script>
    <script src="//cdn.h5case.com.cn/h6app_userInfo.1.1.0.min.js"></script>
    <!-- 微信userinfo -end-  -->

    <script type="text/javascript" src="http://115.159.69.89:3002/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script src="./js/boy-page/loading.js"></script>
    <script src="./js/boy-page/p1.js"></script>
    <script src="./js/boy-page/p6.js"></script>
    <script src="./js/boy-page/p7.js"></script>
    <script src="./js/boy-page/p9.js"></script>
    <script src="./js/boy-page/p11.js"></script>
    <script src="./js/boy-page/pk.js"></script>


    <script src="./js/boySceneList.js"></script>
    <script src="./js/scene.js"></script>
    <script src="./js/boy.js"></script>
    <script>
        var keyTime = 200;
        var openid = getOpenid();
        var sign = getSign();

        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }
        window.onload = function() {
            resetTop();
            music('bgm');
            window.socket = io.connect('http://115.159.69.89:3002');
            window.girlid = getQueryString('fxzid');
            window.boy = new Boy(openid, girlid, socket)
            window.scene = new Scene(sceneList, boy);
            window.boy.connect();
            window.scene.next();

            window.boy.on("girl.disconnect", function() {
                document.getElementById("socket").classList.remove('none');
                document.querySelector(".socket__tips-btn").addEventListener("click", function() {
                    var currentHref = window.location.href.replace("boy", "girl");
                    currentHref = currentHref.replace(/\?[\s\S]*/, "");
                    window.location = currentHref;
                });
            });
        }
    </script>

    <script type="text/javascript" src="js/other.js"></script>
</body>

</html>